<template>
  <scroll-view scroll-y class="list" >
    <view v-for="Item in newslist" :key="Item.newsId">
      <!-- part1 -->
      <view class="part1" v-if="Item.newsImgArr.length === 3">
        <!-- 用户信息 -->
        <view class="user">
          <!-- 用户头像 -->
          <view class="img">
            <image :src="Item.avatar" mode="scaleToFill" />
          </view>
          <!-- 用户名字-简介 -->
          <view class="userinfo">
            <view class="name">{{ Item.author }}</view>
            <view class="introduce">{{ Item.userInfo }}</view>
          </view>
        </view>
        <!-- 新闻信息 -->
        <view class="news">
          <!-- 标题 -->
          <view class="title">
            <text>{{ Item.title }}</text>
          </view>
          <!-- 图片 -->
          <view class="newimg">
            <view class="I" v-for="item in Item.newsImgArr" :key="item">
              <image :src="item" />
            </view>
          </view>
        </view>
      </view>
      <!-- part2 -->
      <view class="part2" v-else>
        <!-- 新闻内容 -->
        <view class="N_img"><image :src="Item.newsImgArr[0]" /></view>
        <view class="news_contant">
          <view class="N_title">{{ Item.title }}</view>
          <view class="N_content">{{ Item.content }}</view>
        </view>
      </view>
    </view>
    <view style="text-align: center; color: #929191; font-size: 28rpx">正在加载...</view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import type { news, getnews, newsItem } from '@/types/index'
//接收参数
defineProps<{
  newslist?: newsItem[]
}>()
</script>

<style lang="scss">
.list {
  padding: 10rpx 20rpx;
  .part1 {
    border-bottom: 1rpx solid #ccc;
    margin-bottom: 30rpx;
    height: 440rpx;
    .user {
      display: flex;
      height: 100rpx;
      margin-bottom: 10rpx;
      .img {
        height: 100%;
        width: 100rpx;
        border-radius: 100rpx;
        overflow: hidden;
      }
      .userinfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 30rpx;
        .name,
        .introduce {
          height: 50rpx;
          line-height: 50rpx;
          text-align: left;
        }
        .name {
          font-size: 28rpx;
          color: #000;
          font-weight: bold;
        }
        .introduce {
          font-size: 24rpx;
          color: #757474;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
    .news {
      .title {
        line-height: 55rpx;
        margin-bottom: 15rpx;
        color: #000;
        font-size: 30rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .newimg {
        height: 200rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .I {
          height: 200rpx;
          width: 200rpx;
        }
      }
    }
    .infoicon {
      width: 100%;
      height: 100rpx;
    }
  }
  .part2 {
    display: flex;
    flex-direction: row-reverse;
    padding: 20rpx 0;
    height: 260rpx;
    border-bottom: 1rpx solid #ccc;
    margin-bottom: 30rpx;
    .N_img {
      height: 100%;
      width: 220rpx;
    }
    .news_contant {
      flex: 1;
      margin-right: 10rpx;
      .N_title {
        font-size: 30rpx;
        color: #000;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 55rpx;
        margin-bottom: 5rpx;
      }
      .N_content {
        font-size: 26rpx;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        line-height: 40rpx;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>